{% load humanize %}
{% load firecares_tags %}
{% load favit_tags %}

<div class="ct-itemProducts ct-u-marginBottom30 ct-hover fire-department-card">

    {% if object.recently_updated %}
        <label class="control-label sale">
            Recently updated
        </label>
    {% endif %}

    <a href="{{ department.get_absolute_url }}">
        <div class="ct-main-content">
            <div class="ct-imageBox">
                <img src="{{ department.thumbnail }}" alt=""><i class="fa fa-eye"></i>
            </div>
            <div class="ct-main-text">
                <div class="ct-product--tilte">
                    {{ department.name }}
                </div>
            </div>
        </div>
        <div class="ct-product--meta">
            <div class="ct-icons">
                <span tooltip="Predicted number of fires" tooltip-append-to-body="true" tooltip-popup-delay="700">
                    <i class="fa fa-fire"></i>
                    {% if user.is_authenticated and department.display_metrics %}
                        {{ department.metrics.risk_model_fires.all|default:"N/A"|abbreviatedintword:1000 }}
                    {% else %}
                        N/A
                    {% endif %}
                </span>
                <span tooltip="Performance score" tooltip-append-to-body="true" tooltip-popup-delay="700">
                    <i class="fa fa-clock-o"></i>
                    {% if user.is_authenticated and department.display_metrics %}
                        {% if department.metrics.dist_model_score.all %}
                            {{ department.metrics.dist_model_score.all|floatformat:"0" }}s
                        {% else %}
                            N/A
                        {% endif %}
                    {% else %}
                        N/A
                    {% endif %}
                </span>
                <span tooltip="Protected population" tooltip-append-to-body="true" tooltip-popup-delay="700">
                    <i class="fa fa-users"></i> {{ department.population|abbreviatedintword }}
                </span>
                <span tooltip="State" tooltip-append-to-body="true" tooltip-popup-delay="700">
                    <i class="fa fa-map-pin"></i> {{ department.state }}
                </span>
                <div class="fire-department-card-favorite-button">
                    {% favorite_button department 'favit/buttonWhite.html' %}
                </div>
            </div>
            <div class="ct-text"></div>
        </div>
    </a>
</div>
